<template>
  <div class="review-avoid">
    <div class="select">
      抽取项目：
      <el-select v-model="projectId" clearable @change="handleGetReviewProject">
        <el-option v-for="item in projectDataOptions" :key="item.id" :label="item.projectName" :value="item.id">
          {{ item.projectName }}
        </el-option>
      </el-select>
    </div>
    <div class="info">
      <div class="show-project__box">
        <el-descriptions class="margin-top" title="项目信息" :column="2" size="small" border>
          <el-descriptions-item>
            <template slot="label">项目名称</template>
            {{ this.projectMessage.projectName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">项目类型</template>
            {{ this.projectMessage.projectType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">项目位置</template>
            {{ this.projectMessage.projectLocation }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">联系方式</template>
            {{ this.projectMessage.projectContact }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">项目状态</template>
            <el-tag v-show="typeof this.projectMessage.projectStatus==='number'"
                    :type="statusTagType(''+this.projectMessage.projectStatus)">
              {{ statusShowOptions['' + projectMessage.projectStatus] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">评审人数</template>
            {{ this.projectMessage.projectReviewNumber ? this.projectMessage.projectReviewNumber : 0 }}人
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">评审时间</template>
            {{ this.projectMessage.projectReviewTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">项目评分</template>
            <span style="color: #C0C4CC" v-show="!projectMessage.projectScore">暂无评分</span>
            <el-rate v-show="projectMessage.projectScore" v-model="projectMessage.projectScore" disabled show-score
                     text-color="#ff9900" :max=5></el-rate>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">创建人</template>
            {{ this.projectMessage.createUserName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">创建时间</template>
            {{ this.projectMessage.createTime }}
          </el-descriptions-item>

        </el-descriptions>
        <div class="ql-editor">
          <el-empty v-show="!this.projectMessage.projectContent" description="暂无项目简介"></el-empty>
          <p v-html="this.projectMessage.projectContent"></p>
        </div>
      </div>
      <div class="add-avoid">
        <el-form label-width="100px" class="avoid-form" :disabled="disabled">
          <el-form-item label="指定专家：">
            <el-select class="input" multiple filterable remote reserve-keyword
                       placeholder="请输入专家名关键词"
                       v-model="avoidMessage.defaultExpert"
                       :remote-method="remoteDefaultExpert"
                       :loading="defaultExpertLoading">
              <el-option v-for="item in defaultExpertOptions" :key="item.id" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.idNumber }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回避单位:">
            <el-input v-model="avoidMessage.avoidUnit" class="input" type="textarea"
                      placeholder="请输入回避单位信息，多条请用“；”区分"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="回避地区:">
            <el-input v-model="avoidMessage.avoidRegion" class="input" type="textarea"
                      placeholder="请输入回避地区信息，多条请用“；”区分"
                      clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-show="avoidMessage.hasData" :disabled="false" @click="changeDisable">
              {{ disabled ? '编辑' : '取消编辑' }}
            </el-button>
            <el-button type="success" :disabled="!projectId" v-show="!disabled"  @click="addAvoid">保存回避信息</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectOptions, GetReviewProjectApi } from '@/request/project/project-api'
import { selectByName } from '@/request/expert/expert-api'
import { AddAvoidApi, InitAvoidInfoApi } from '@/request/Extract/extract-avoid-api'

export default {
  created () {
    this.initOptions()
  },
  data () {
    return {
      projectDataOptions: [],
      projectId: null,
      projectMessage: {},
      avoidMessage: [],
      disabled: false,
      defaultExpertOptions: [],
      defaultExpertLoading: false,
      statusShowOptions: ['已登记', '已设置条件,未抽取', '已抽取', '待评审', '已评审', '抽取失败', '已取消'],
      statusTagTypes: ['', '', 'warning', 'warning', 'success', 'danger', 'info'],
    }
  },
  methods: {
    async initOptions () {
      let res = await getProjectOptions()
      if (res && res.code === 200) {
        this.projectDataOptions = res.data
      }
    },
    //返回状态的标签样式
    statusTagType (status) {
      return this.statusTagTypes[status]
    },
    async remoteDefaultExpert (query) {
      if (query && query !== '') {
        this.defaultExpertLoading = true
        this.defaultExpertOptions = []
        //发送请求
        let res = await selectByName(query)
        if (res && res.code === 200) {
          this.defaultExpertOptions = res.data
          this.defaultExpertLoading = false
        } else {
          this.$message.error('获取专家失败')
          this.defaultExpertLoading = false
        }
      }
    },
    async handleGetReviewProject () {
      this.loading = true
      this.disabled = false
      this.projectMessage = {}
      this.avoidMessage = []
      if (this.projectId) {
        let projectRes = await GetReviewProjectApi(this.projectId ? this.projectId : -1)
        if (projectRes && projectRes.code === 200) {
          this.projectMessage = projectRes.data

          this.maxNumber = projectRes.data.projectReviewNumber
        } else {
          this.$message.error('查询项目信息失败')
        }
        let avoidRes = await InitAvoidInfoApi(this.projectId)
        if (avoidRes && avoidRes.code === 200) {
          this.avoidMessage = avoidRes.data
          this.defaultExpertOptions = avoidRes.data.defaultExpert
          this.avoidMessage.defaultExpert = avoidRes.data.defaultExpert ? avoidRes.data.defaultExpert.map(item => item.id) : []
          if (avoidRes.data.hasData) {
            this.disabled = true
          }
        } else {
          this.$message.error('查询回避条件失败')
        }
      }
      this.loading = false
    },
    changeDisable () {
      this.disabled = !this.disabled
    },
    async addAvoid () {
        const data = {
          projectId: this.projectId,
          extractDefaultExpert: this.avoidMessage.defaultExpert,
          avoidRegion: this.avoidMessage.avoidRegion,
          avoidUnit: this.avoidMessage.avoidUnit
        }
        let res = await AddAvoidApi(data)
        if (res && res.code === 200) {
          this.$message.success('保存成功')
          this.projectId = null
          this.projectMessage = {}
          this.avoidMessage = []
          this.disabled = false
        }else {
          this.$message.error(res.msg?res.msg:"保存回避条件失败")
        }

      }
    }
  // }
}
</script>
<style scoped lang="less">
.review-avoid {
  margin: 20px;
  height: 700px;

  .select {
    font-size: 14px;
    margin: 0 20px;
  }

  .info {
    display: flex;

    .show-project__box {
      width: 100%;
      margin: 20px;
      padding: 20px;

      .ql-editor {
        border: 0.5px solid #EBEEF5;
        height: 300px;
        overflow-y: scroll;
        margin: 20px 0;
      }
    }

    .add-avoid {
      height: 565px;
      width: 100%;
      padding: 20px;
      margin: 20px;

      .avoid-form {
        width: 100%;
        height: 466px;
        overflow-y: scroll;
        border: 0.5px solid #EBEEF5;
        padding-top: 100px;

        .el-form-item {
          display: flex;
          justify-content: center;
          align-items: center;

          ::v-deep .el-form-item__content {
            margin-left: 0 !important;
          }

          .input {
            width: 350px;
          }
        }

      }
    }
  }
}
</style>
